<template>
  <div>
    <el-button type="primary" @click="openLoading1">loadingStart</el-button>
    <el-button type="primary" @click="openLoading2">$loadingStart</el-button>
  </div>
</template>

<script setup lang="ts">
import {
  type ComponentInternalInstance,
  type ComponentPublicInstance
} from 'vue'
import { useLoading } from '@/hooks/useLoading'

const { loadingStart, loadingEnd } = useLoading()

// 获取实例
const { proxy } = getCurrentInstance() as ComponentInternalInstance
const { $loadingStart, $loadingEnd } = proxy as ComponentPublicInstance

function openLoading1() {
  loadingStart()
  setTimeout(() => {
    loadingEnd()
  }, 1000)
}
function openLoading2() {
  $loadingStart()
  setTimeout(() => {
    $loadingEnd()
  }, 1000)
}
</script>

<style scoped></style>
